<template>
	<!-- 兑换详情 -->
	<view class="content">
		<!-- 优惠券兑换 -->
		<view class="banner-title">
			<view class="banner">
				<image :src="imgUrl+'/static/image/my/coupon_default.png'" mode=""></image>
			</view>
			<view class="title">
				<view class="name">10元直减优惠券</view>
				<view class="describe">领券当日开始90天内有效</view>
			</view>
			<view class="integral-title">
				<view class="integral">
					<text class="action">1000</text>
					<text>邮币</text>
				</view>
				<view class="integral">
					<text>剩余</text>
					<text class="action">1000</text>
					<text>件</text>
				</view>
			</view>
		</view>
		<!-- 商品兑换 -->
		<!-- <view class="banner-goods" v-else>
			<view class="banner">
				<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image :src="item.url" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="goods-title">
				<view class="title-vip">
					<view class="title">
						<text>荣耀20青春版 AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 4GB+64GB 冰岛幻境</text>
					</view>
					<view class="vip">
						<text>超级会员</text>
					</view>
				</view>
				<view class="integral-title">
					<view class="integral">
						<text class="action">10000</text>
						<text>邮币</text>
					</view>
					<view class="integral">
						<text>剩余</text>
						<text class="action">1000</text>
						<text>件</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 兑换须知 -->
		<view class="convertible-notes">
			<view class="title">兑换须知</view>
			<view class="dhxz_content">
				<view>1、领券当日开始90天内有效;</view>
				<view>2、本优惠券限量1000件/期，兑完即止;</view>
				<view>3、部分新品、特价商品、拼团特惠、限时特惠和超级会员特价商品不可使用;</view>
				<view>4、优惠券兑换后，不可取消兑换并返还邮币。</view>
			</view>
		</view>
		<!-- 兑换按钮 -->
		<view class="exchange-btn">
			<view class="btn" @click="isExchange = true">立即兑换</view>
		</view>
		<!-- 兑换弹窗 -->
		<view class="exchange-win">
			<view class="cu-modal" :class="{'show':isExchange}">
			  <view class="cu-dialog">
			    <view class="bg-img" :style="{backgroundImage: 'url(' + imgUrl + '/static/image/my/banner_04.png)', height: '200px'}">
			      <view class="cu-bar justify-end text-white">
			        <view class="action">
			          <text class="cuIcon-close" @click="isExchange = false"></text>
			        </view>
			      </view>
			    </view>
			    <view class="goods-title">
			    	<view class="title-vip">
			    		<view class="title">
			    			<text class="two-omit">荣耀20青春版 AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 4GB+64GB 冰岛幻境</text>
			    		</view>
			    		<view class="vip">
			    			<text>超级会员</text>
			    		</view>
			    	</view>
			    	<view class="integral-title">
			    		<view class="integral">
			    			<text class="action">10000</text>
			    			<text>邮币</text>
			    		</view>
			    		<view class="integral">
			    			<text>剩余</text>
			    			<text class="action">1000</text>
			    			<text>件</text>
			    		</view>
			    	</view>
			    </view>
					<view class="delivery-address">
						<view class="title">收货地址</view>
						<view class="address-phone">
							<view class="icon">
								<text class="iconfont icon-dingwei1"></text>
							</view>
							<view class="address">
								<view class="location">
									<text class="one-omit">南山区科苑路15号科兴科学园</text>
								</view>
								<view class="name-phone">
									<text>王哈哈</text>
									<text>188****8888</text>
								</view>
							</view>
							<view class="more">
								<text class="iconfont icon-more"></text>
							</view>
						</view>
					</view>
					<view class="affirm-btn">
						<view class="btn" @click="onAffirm">确认</view>
					</view>
			  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ExchangeType: 0,
				isExchange: false,
				// swiperList: [
				//   {
				// 	id: 0,
				// 	type: 'image',
				// 	url: '/static/image/my/banner_01.png'
				//   },
				//   {
				// 	id: 1,
				// 	type: 'image',
				// 	url: '/static/image/my/banner_02.png'
				//   },
				//   {
				// 	id: 2,
				// 	type: 'image',
				// 	url: '/static/image/my/banner_03.png'
				//   },
				//   {
				// 	id: 3,
				// 	type: 'image',
				// 	url: '/static/image/my/banner_04.png'
				//   },
				//   {
				// 	id: 4,
				// 	type: 'image',
				// 	url: '/static/image/my/banner_01.png'
				//   },
				//   {
				// 	id: 5,
				// 	type: 'image',
				// 	url: '/static/image/my/banner_01.png'
				//   }
				// ],
			}
		},
		computed:{
			imgUrl(){
				return this.$imgUrl
			}
		},
		onLoad() {

		},
		mounted() {

		},

		methods: {
			/**
			 * 兑换确认点击
			 */
			onAffirm(){
				uni.navigateTo({
					url: '/pages/ExchangeResult/ExchangeResult',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}
	/* 优惠券兑换 */
	.banner-title {
		width: 100%;
		height: 520rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		padding-top: 100rpx;
		.banner {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 200rpx;
			margin: 0 auto;
			// background-color: $base;
			background-color: #28AAA9;
			border-radius: 100%;
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
		.title {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 140rpx;
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
			}
			.describe {
				font-size: 24rpx;
				color: #959595;
				margin-top: 10rpx;
			}
		}
		.integral-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 4%;
			height: 80rpx;
			.integral {
				display: flex;
				align-items: center;
				text {
					font-size: 24rpx;
					color: #959595;
				}
				.action {
					font-size: 32rpx;
					font-weight: bold;
					// color: $base;
					color: #28AAA9;

					margin-right: 10rpx;
				}
			}
		}
	}

	/* 商品兑换 */
	.banner-goods {
		width: 100%;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		.banner {
			width: 100%;
			height: 360rpx;
			overflow: hidden;
			.screen-swiper {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.goods-title {
			width: 100%;
			padding: 20rpx;
			border-bottom: 2rpx solid #f6f6f6;
			.title-vip {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				.title {
					display: flex;
					align-items: center;
					text-align: left;
					width: 70%;
					text {
						font-size: 26rpx;
						font-weight: bold;
						color: #222222;
					}
				}
				.vip {
					display: flex;
					align-items: center;
					text {
						padding: 6rpx 12rpx;
						font-size: 24rpx;
						color: #ff9900;
						border: 2rpx solid #ff9900;
						border-radius: 200rpx;
					}
				}
			}
			.integral-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 4%;
				height: 80rpx;
				.integral {
					display: flex;
					align-items: center;
					text {
						font-size: 24rpx;
						color: #959595;
					}
					.action {
						font-size: 32rpx;
						font-weight: bold;
						// color: $base;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	/* 兑换须知 */
	.convertible-notes {
		width: 100%;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		>.title {
			display: flex;
			align-items: center;
			padding: 0 4%;
			height: 80rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		>.dhxz_content {
			padding: 0 4%;
			font-size: 26rpx;
			color: #555555;
			>view {
				line-height: 50rpx;
			}
		}
	}

	/* 兑换按钮 */
	.exchange-btn {
		position: fixed;
		left: 0;
		bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90%;
			height: 70rpx;
			font-size: 28rpx;
			color: #ffffff;
			// background: linear-gradient($base, $change-clor);
			background-color: #28AAA9;
			box-shadow: 0 2px 5px #28AAA9;
			border-radius: 70rpx;
		}
	}

	/* 兑换弹窗 */
	.exchange-win {
		.goods-title {
			width: 100%;
			padding: 20rpx;
			border-bottom: 2rpx solid #EEEEEE;
			.title-vip {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				.title {
					display: flex;
					align-items: center;
					width: 70%;
					height: 100rpx;
					text {
						font-size: 26rpx;
						font-weight: bold;
						color: #222222;
						text-align: left;
					}
				}
				.vip {
					display: flex;
					align-items: center;
					text {
						padding: 6rpx 12rpx;
						font-size: 24rpx;
						color: #ff9900;
						border: 2rpx solid #ff9900;
						border-radius: 200rpx;
					}
				}
			}
			.integral-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 4%;
				height: 80rpx;
				.integral {
					display: flex;
					align-items: center;
					text {
						font-size: 24rpx;
						color: #959595;
					}
					.action {
						font-size: 32rpx;
						font-weight: bold;
						color: $base;
						margin-right: 10rpx;
					}
				}
			}
		}
		.delivery-address{
			padding: 0 4%;
			height: 200rpx;
			.title{
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #555555;
			}
			.address-phone{
				display: flex;
				align-items: center;
				width: 100%;
				height: 120rpx;
				.icon{
					display: flex;
					align-items: center;
					width: 10%;
					height: 100%;
					text{
						font-size: 38rpx;
					}
				}
				.address{
					width: 80%;
					height: 100%;
					.location{
						display: flex;
						align-items: center;
						width: 100%;
						height: 50%;
						text{
							font-size: 26rpx;
							color: #222222;
						}
					}
					.name-phone{
						display: flex;
						align-items: center;
						width: 100%;
						text{
							font-size: 26rpx;
							color: #959595;
						}
					}
				}
				.more{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 10%;
					height: 100%;
					text{
						font-size: 32rpx;
						color: #959595;
					}
				}
			}
		}
		.affirm-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90%;
				height: 60rpx;
				font-size: 28rpx;
				color: #ffffff;
				// background: linear-gradient($base, $change-clor);
				background-color: #28AAA9;
				box-shadow: 0 2px 5px #28AAA9;
				border-radius: 70rpx;
			}
		}
	}
</style>
